<template>
	<view class="my-container">
		<view class="record-content">
			<view v-if="ticketList">
				<view class="record-item" v-for="item in ticketList" :key="item.id" @click="goOrderDetail(item.id)">
					<view class="item-title">
						<view class="left-border"></view>
						<view class="left">{{ticketType[item['工单类型']]}}</view>
						<view class="right">{{item['创建时间']}}</view>
					</view>
					<view class="item-content">
						<view class="content-top">
							<view>联系人姓名 ：{{item['联系人姓名']}}</view>
							<view class="ticket-status paifa" v-if="item['工单状态'] == 'unclaimed'">待派发</view>
							<view class="ticket-status daichuli" v-if="item['工单状态'] == 'pending'">待处理</view>
							<view class="ticket-status deal" v-if="item['工单状态'] == 'handling'">处理中</view>
							<view class="ticket-status abandon" v-if="item['工单状态'] == 'timeout'">已超时</view>
							<view class="ticket-status daichuli" v-if="item['工单状态'] == 'completedwithtimeout'">超时完成</view>
							<view class="ticket-status complete" v-if="item['工单状态'] == 'completed'">正常完成</view>
							<view class="ticket-status abandon" v-if="item['工单状态'] == 'abandoned'">已废弃</view>
							<!-- <view class="handle">待处理</view>
						<view class="handle">处理中</view>
						<view class="handle">已完成</view> -->
						</view>
						<view class="content-center">联系电话 ：{{item['联系人电话']}}</view>
						<view class="content-bottom">
							<view class="address">报事地址 ：{{item['报事位置']}}</view>
							<!-- <view class="transfer">转派单</view> -->
						</view>
						<!-- <view @click="goCancel(item.id)" v-if="item['工单状态'] !== 'completed' && item['工单状态'] !== 'abandoned'" class="cancel">废弃</view> -->
					</view>
				</view>
			</view>
			<view class="bgwhite" v-else>
				<van-empty description="暂无工单" />
			</view>
			<uni-load-more v-if="ticketList && ticketList.length >= 5" :status="status" />
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				status: 'more',
				params: {
					接单人id: null,
					联系人姓名: '',
					联系人电话: '',
					报事人类型: 3,
					报事人id: null,
					工单状态: null,
					所属单位: null,
					pagination: {
						current: 1,
						pageSize: 5
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				ticketType: this.$type.ticketType,
				ticketList: []
			}
		},
		onLoad() {
			this.setMyTicket(true)
			this.getTicketList()
		},
		onReachBottom() {
			console.log('触发上拉')
			if(this.status !== 'noMore' && this.ticketList) {
				this.status = 'loading'
				this.getMoreTicket()
			}
		},
		methods: {
			goCancel(id) {
				uni.navigateTo({
					url: '../cancelTicket/cancelTicket?id=' + id
				})
			},
			...mapMutations(['setMyTicket']),
			getTicketList() {
				this.params.报事人id = uni.getStorageSync('userInfo').id
				uni.showLoading()
				this.$http2.post('ticketSystem/ticket/list', this.params).then(res => {
					// console.log(res, '我的')
					if (res.code === 10000) {
						if (res.data.list !== null) {
							res.data.list.forEach(item => {
								item.创建时间 = dayjs(item.创建时间).format('YYYY-MM-DD HH:mm:ss')
							})
						}
						this.ticketList = res.data.list
						if(this.ticketList  && this.ticketList .length === res.data.total){
							this.status = 'noMore'
						}
						// if (this.isResetSum) {
						// 	this.navList[0].total = res.data.total
						// }
						// this.navList[0].length = res.data.total
					}
				})
			},
			getMoreTicket() {
				this.params.pagination.current++
				this.$http2.post('ticketSystem/ticket/list', this.params).then(res => {
					if(res.code === 10000){
						if (res.data.list !== null) {
							res.data.list.forEach(item => {
								item.创建时间 = dayjs(item.创建时间).format('YYYY-MM-DD HH:mm:ss')
							})
						}
						this.ticketList = this.ticketList && this.ticketList.concat(res.data.list)
						if(this.ticketList.length === res.data.total){
							this.status = 'noMore'
						}
					}
				})
			},
			goOrderDetail(id) {
				uni.navigateTo({
					url: '../myOrderDetail/myOrderDetail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-container {
		background-color: #f5f6f7;
		min-height: 100vh;
		// padding-bottom: 20rpx;
	}
	.bgwhite {
		height: 100vh;
		background-color: #fff;
	}
	.van-empty {
		background-color: #f5f6f7!important;
	}
	.ticket-status {
		// width: 82rpx;
		height: 36rpx;
		font-size: 22rpx;
		text-align: center;
		padding: 0 10rpx;
	}
	.paifa {
		color: #7D77EF;
		border: 2rpx solid #7D77EF;
	}
	.daichuli {
		color: #FFB93F;
		border: 2rpx solid #FFB93F;
	}
	.abandon {
		color: #FB5656;
		border: 2rpx solid #FB5656;
	}

	.deal {
		color: #1152FC!important;
		border: 2rpx solid #1152FC;
		background-color: #fff!important;
	}

	.complete {
		color: #43CC46;
		border: 2rpx solid #43CC46;
	}
</style>
